<template>
  <div class="FormTextarea mr10 mb10" :style="calcStyle">
    <header v-if="titTxt" class="header">
      <i v-if="prop" style="color: #f56c6c;" class="mr4">*</i>
      {{titTxt}}
    </header>
    <el-form-item
      v-if="prop"
      label="" :prop="prop"
      :inline-message="true">
      <el-input
        type="textarea" :rows="5"
        :value="val" v-bind="$attrs"
        resize="none" :placeholder="placeholder"
        @input="$emit('update:val', $event)">
      </el-input>
    </el-form-item>
    <el-input
      v-else
      type="textarea" :rows="5"
      :value="val" v-bind="$attrs"
      resize="none" :placeholder="placeholder"
      @input="$emit('update:val', $event)">
    </el-input>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      // 支持.sync
      val: {
        required: true
      },
      titTxt: {
        type: String,
        default: ''
      },
      width: {
        type: String,
        default: '100%'
      },
      placeholder: {
        type: String,
        default: '请输入内容'
      },
      // 用于配合表单验证
      prop: {
        type: String
      }
    },
    computed: {
      calcStyle () {
        return {
          width: this.width
        }
      }
    }
  }
</script>

<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
  @import '~@/assets/css/public.scss';

  .FormTextarea {
  }

  .header {
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
    border: 1px solid #{$c-eee};
  }

  /deep/ .el-textarea__inner {
    padding: 5px 10px;
    border-radius: 0 0 5px 5px;
    border: 1px solid #{$c-eee};
  }
</style>
